<template>
    <el-dialog v-model="dialogFormVisible" title="详情">
        <el-form :model="form" label-width="auto" v-loading="isLoading" element-loading-text="数据加载中...">
            <el-form-item label="请求路径">
                <el-input v-model="form.requestUrl" disabled />
            </el-form-item>
            <el-form-item label="请求参数">
                <el-input type="textarea" autosize v-model="form.params" disabled />
            </el-form-item>
            <el-form-item label="异常类型">
                <el-input type="textarea" autosize v-model="form.errorType" disabled />
            </el-form-item>
            <el-form-item label="异常详情">
                <el-input type="textarea" autosize v-model="form.errorDetail" disabled />
            </el-form-item>
            <el-form-item label="错误时间">
                <el-input v-model="form.createTime" disabled />
            </el-form-item>
            <el-form-item label="日志追踪ID">
                <el-input v-model="form.traceId" disabled />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue"
import Request from "@/api"
import { ElMessage } from 'element-plus'

const dialogFormVisible = ref(false)
const isLoading = ref(false)
const form = ref({})
const init = async (logId) => {
    dialogFormVisible.value = true
    isLoading.value = true
    const res = await Request.post('/system/errorLogs/queryById', { id: logId })
    if (res.data.code === 200) {
        form.value = res.data.data
    } else {
        ElMessage.error(res.data.msg)
    }
    isLoading.value = false
}
defineExpose({
    init
});

</script>